
goog.provide('esn.Slider');

goog.require('goog.ui.Slider');


/**
 * @constructor
 */
esn.Slider = function(possibleTextValues, opt_textValueEl) {
  goog.base(this);

  this.possibleTextValues_ = possibleTextValues;

  this.textValueEl_ = opt_textValueEl || null;

  this.setMaximum(this.possibleTextValues_.length - 1);

  // We want to track teh current value so that we only dispatch a change when
  // the value changes.
  this.currentValue_ = null;
};
goog.inherits(esn.Slider, goog.ui.Slider);

esn.Slider.EventType = {
  CHANGE: goog.events.getUniqueId('change')
};

// TODO: Calculate gradient between two colors.
esn.Slider.SLIDER_GRADIENT = [
  'ABD2A3', 'A8D09F', 'A5CE9C', 'A2CC99', '9FCA96', '9CC893', '99C790',
  '96C58D', '93C38A', '91C187', '8EBF84', '8BBD80', '88BC7D', '85BA7A',
  '82B877', '7FB674', '7CB471', '7AB36E', '77B16B', '74AF68', '71AD65',
  '6EAB61', '6BA95E', '68A85B', '65A658', '63A455', '60A252', '5DA04F',
  '5A9F4C', '579D49', '549B46', '519942', '4E973F', '4B953C', '499439',
  '469236', '439033', '408E30', '3D8C2D', '3A8B2A', '378926', '348723',
  '328520', '2F831D', '2C811A', '298017', '267E14', '237C11', '207A0E',
  '1D780B', '1B7708'
];

esn.Slider.prototype.enterDocument = function() {  
  goog.base(this, 'enterDocument');

  this.getHandler().listen(
      this,
      goog.ui.Component.EventType.CHANGE,
      this.handleSliderChange_);
};

esn.Slider.prototype.setValue = function(opt_value) {
  if (goog.isNumber(opt_value)) {
    if (opt_value == 0) {
      // Because the default value is 0 a change won't be registered (so the
      // slider thumb will be the wrong color). So we set it to 1 and then back
      // to zero to make sure it's the right color.
      goog.base(this, 'setValue', 1);
      goog.base(this, 'setValue', 0);
    } else {
      goog.base(this, 'setValue', opt_value);
    }
    this.currentValue_ = opt_value;
  }
};

esn.Slider.prototype.handleSliderChange_ = function(e) {
  var valuePercent = this.getValue() / this.getMaximum();

  // If there's a text value element display the selected value in it.
  if (this.textValueEl_ && this.possibleTextValues_) {
    var valueDescIndex = this.calculateTextIndex_(this.getValue(),
        this.getMaximum(), this.possibleTextValues_.length);
    this.getDomHelper().setTextContent(
        this.textValueEl_,
        this.possibleTextValues_[valueDescIndex]);
  }

  // Mark parent element as seleted.
  var cellEl = e.target.getElement().parentNode;
  goog.dom.classes.add(cellEl, 'selected');
  // Clear "missing" class just in case it was set.
  goog.dom.classes.remove(cellEl, 'missing');

  // Set slider grandient color.
  var grandientIndex = this.calculateTextIndex_(this.getValue(),
        this.getMaximum(), esn.Slider.SLIDER_GRADIENT.length);
      // Math.floor(valuePercent * (esn.Slider.SLIDER_GRADIENT.length - 1));
  var gradientColor = esn.Slider.SLIDER_GRADIENT[grandientIndex];
  goog.style.setStyle(this.getElementByClass('goog-slider-thumb'),
      'background-color', '#' + gradientColor);

  // Only dispatch a CHANGE event.
  if (this.currentValue_ != this.getValue()) {
    this.dispatchEvent(esn.Slider.EventType.CHANGE);
  }
  this.currentValue_ = this.getValue();
};

esn.Slider.prototype.calculateTextIndex_ = function(value, maxValue,
    textValuesLength) {
  return Math.floor(value / ((maxValue + 1) / textValuesLength));
};
